<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
        layout:decorator="app/mp/mtg/layout">
<head>
    <style>
        .mtg-title {
            text-align: center;
            font-size: 34px;
            color: #3cc51f;
            font-weight: 400;
            margin: 0 15%;
        }

        .mtg-header {
            padding: 10px 0;
        }

        .mtg-protocol-padded {
            padding: 20px 15px 0 15px;
        }

        .mtg-protocol-padded span{
            margin-left: 15px;
        }

        .mtg-content-padded {
            padding: 25px 15px 0 15px;
        }

        .protocol-p p {
            padding: 15px 15px 0 15px;
        }

        .protocolClose {
            top: 0;
            font-size: 16px;
            color: #3cc51f;
        }
    </style>
</head>

<div layout:fragment="body">
    <div>
        <img src="/m/img/home_banner.svg" alt="" width="100%">
    </div>

    <form id="ajaxForm" style="padding-bottom: 3rem;">
        <input type="hidden" name="houseAddress" id="houseAddress"/>
        <input type="hidden" name="buildingCode" id="buildingCode"/>
        <input type="hidden" name="cellNo" id="cellNo"/>
        <input type="hidden" name="roomNo" id="roomNo"/>
        <input type="hidden" name="begin" id="begin"/>
        <input type="hidden" name="end" id="end"/>
        <div class="weui-cells weui-cells_form" style="margin-top: 5px;">
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label">地区</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" id="areaSelect" name="areaSelect" readonly
                           placeholder="请选择地区" required="required"/>
                    <input type="hidden" id="regCode" name="regCode"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">物业类型</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" id="typeSelect" name="typeSelect" readonly
                           placeholder="请选择物业类型" required="required"/>
                    <input type="hidden" id="propertyType" name="propertyType"/>
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-select" type="text" placeholder="请选择详细地址" id="houseAddressName"
                           readonly="readonly" required="required"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">面积(㎡)</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" name="roomSize" id="roomSize" placeholder="请输入您的房产面积"
                           required="required"/>
                </div>
            </div>
        </div>

        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" name="mobile" id="mobile" placeholder="请输入您的手机号码"
                           required="required"/>
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" name="code" placeholder="请输入验证码" required="required">
                </div>
                <div class="weui-cell__ft">
                    <button class="weui-vcode-btn" id="getCode">获取验证码</button>
                    <button class="weui-vcode-btn" id="timeCode">60秒</button>
                </div>
            </div>
        </div>
        <div class="mtg-protocol-padded">
            <input style="margin-left: 10px" type="checkbox" id="protocolCheckBox" checked="checked"><span>阅读并同意</span><a href="javascript:;" id="protocol-btn">《杭州房产评估服务协议》</a>
        </div>
        <div class="mtg-content-padded">
            <a href="javascript:;" class="weui-btn weui-btn_primary" id="submit-btn">马上评估</a>
        </div>
    </form>

    <div id="houseAddressSelect" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="bar bar-nav">
                <div class="title">
                    <span th:text="'详细地址'"></span>
                </div>
                <a href="javascript:;" class="icon pull-left picker-button close-popup"><img src="/m/img/fanhui.png"/>
                </a>
            </div>
            <div class="weui-tab content">
                <div class="weui-search-bar">
                    <form class="weui-search-bar__form" action="#">
                        <div class="weui-search-bar__box" style="display: inline;">
                            <input type="search" class="weui-search-bar__input" placeholder="请输入详细地址"
                                   id="search_LIKE_name" style="width: 80%;vertical-align:middle;"/>
                        </div>
                    </form>
                </div>
                <div class="weui-tab__bd" style="margin-bottom: 10px;">
                    <div id="houseAddressList">
                        <div class="no_content">
                            <div style="width: 99px;margin: 0 auto;margin-top: 100px;">
                                <img src="/m/img/nocontent.png">
                            </div>
                            <div style="margin-top: 20px;font-size: 17px; color: #999999; text-align: center;">
                                小区+幢+单元+户（如：某小区5-2-1102）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="protocolView" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div id="protocol">
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" layout:fragment="script">/*<![CDATA[*/
var $form;
var $houseAddressList = $("#houseAddressList");
var $protocol = $("#protocol");

$(function () {
    $form = $("#ajaxForm");
    $form.validate();

    $("#propertyType").val("commApartment");
    $("#typeSelect").val("普通住宅");

    $("#submit-btn").click(function () {
        doEval();
        return false;
    });

    $("#protocol-btn").click(function () {
        $("#protocolView").popup();

        var url = "/app/mp/mtg/protocol";
        $.showLoading("加载中");
        $.get(url, function (result) {
            $.hideLoading();
            $protocol.html(result);
        });
        return false;
    });
    $("#timeCode").hide();
    //点击获取验证码
    $("#getCode").click(function () {
        var mobile = $("#mobile").val();
        if (mobile == "") {
            $.toast("请输入手机号", "text");
            return false;
        }
        reserveCode();

        $.ajax({
            url: '/app/mp/mtg/getCode',
            type: "POST",
            data: 'mobile=' + mobile + '&key=' + encodeURIComponent('[[${token}]]'),
            success: function (reply) {
                if (reply.success) {
                    if (reply.message) {
                        $.toast(reply.message);
                    }
                } else {
                    if (reply.message) {
                        $.alert(reply.message);
                    }
                }
            }
        });
        return false;
    });

    var searchFlag = false;
    $('#search_LIKE_name').on('compositionend', function () {
        var val = $(this).val();
        if (!searchFlag && val.length > 3) {
            loadHouseList();
            searchFlag = true;
        }
    });

    $("#search_LIKE_name").keyup(function (event) {
        var val = $(this).val();
        if (isNone(val)) {
            searchFlag = false;
        }
        if (isNum(val.charAt(val.length - 1)) && event.keyCode != 8) {
            loadHouseList();
        }
    });

    function isNone(val) {
        var space = new RegExp("^[ ]+$");
        if (val == "" || val == null || space.test(val)) {
            return true;
        }
        return false;
    }

    function isNum(val) {
        if (isNone(val)) {
            return false;
        }
        if (!isNaN(val)) {
            return true;
        }
        return false;
    }

    initSelect("areaSelect", "/app/common/area/list", {
        onChange: function (data) {
            $("#regCode").val(data.values);
            $("#areaSelect").val(data.titles);
        }
    });

    initSelect("typeSelect", "/app/common/config?code=PROPERTY_TYPE", {
        onChange: function (data) {
            $("#propertyType").val(data.values);
            $("#typeSelect").val(data.titles);
        }
    });

    $("#houseAddressList").on("click", ".weui-cell", function () {
        var $this = $(this);
        $("#houseAddressName").val($(".weui-cell__bd p", $this).html());
        $("#houseAddress").val($("input[name=houseAddress]", $this).val());
        $("#buildingCode").val($("input[name=buildingCode]", $this).val());
        $("#cellNo").val($("input[name=cellNo]", $this).val());
        $("#roomNo").val($("input[name=roomNo]", $this).val());
        $("#begin").val($("input[name=begin]", $this).val());
        $("#end").val($("input[name=end]", $this).val());
        $.closePopup();
    });

    $("#houseAddressName").on("click", function () {
        var propertyType = $("#propertyType").val();
        var regCode = $("#regCode").val();

        if (propertyType == "" || regCode == "") {
            $.toast("请选择地区", "text");
            return;
        }
        $("#typeSelect").select("close");
        $("#areaSelect").select("close");
        $("#houseAddressSelect").popup();
    })
});

function loadHouseList() {
    var propertyType = $("#propertyType").val();
    var regCode = $("#regCode").val();
    var url = "/app/mp/mtg/houseAddressPart?regCode=" + regCode + "&propertyType=" + propertyType + "&addr=" + $("#search_LIKE_name").val();
    $.showLoading("查询中");
    $.get(url, function (result) {
        $.hideLoading();
        $houseAddressList.html(result);
    });
}

function reserveCode() {
    //显示60s倒计时，隐藏‘获取验证码’
    var time = 0;
    //倒计时-打开
    $("#timeCode").show();
    //获取-隐藏
    $("#getCode").hide();
    timer = setInterval(function () {
        time = parseInt($("#timeCode").html());
        time--;
        $("#timeCode").html(time + "秒");
        //60s后停止定时器
        if (time == 0) {
            $("#timeCode").html("60秒").hide();
            $("#getCode").show();
            clearInterval(timer);
        }
    }, 1000)
}

function doEval() {
    var isChecked= $("#protocolCheckBox").is(":checked");
    if(!isChecked){
        $.toast("请同意《杭州房产评估服务协议》", "text");
        return false;
    }

    if (!$form.valid()) {
        return false;
    }

    var roomSize = $("#roomSize").val();
    var reg = /^[0-9]+(\.[0-9]+)?$/;
    if (!reg.test(roomSize)) {
        $.toast("输入非法字符", "text");
        return false;
    }

    if (parseFloat(roomSize) < 40 || parseFloat(roomSize) > 2000) {
        $.toast("输入范围：40-2000平", "text");
        return false;
    }
    var msg = "确认要提交该评估";
    $.confirm(msg, function () {
        //加载遮挡层
        $.showLoading("提交中");

        //点击确认后的回调函数
        var formData = $form.serialize();
        var url = "/app/mp/mtg/toEval";

        $.ajax({
            type: "POST",
            url: url,
            cache: false,
            data: formData,
            success: function (reply) {
                //关闭遮挡层
                $.hideLoading();
                if (reply.success) {
                    window.location.href = "/app/mp/mtg/evalInfo?id=" + reply.data.id + "&loanRequestId=" + reply.data.loanRequestId;
                } else {
                    $.toast(reply.message, "text");
                }
            }
        });
    }, function () {
        //点击取消后的回调函数
    });
}

/*]]>*/</script>

</html>